<!DOCTYPE HTML>
<html>

<head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon" />
    <style>
        p {
            border: medium double black;
        }
    </style>
</head>

<body>
    <!-- p元素生成时，元素自身会有一个HTMLElement对象，内容则会有一个Text对象
            
            p元素的第一个子对象是Text对象，然后到b元素对象，然后到b元素的Text对象
            最后是p元素的Text对象
        
        -->
    <p id="textblock" class="fruit numbers" data-fruit="apple" data-sentiment="like">There are lots of different kinds of fruit - there are over <b>500</b>
        varieties of banana alone. By the time we add the countless types of apples,
        oranges, and other well-known fruit, we are faced with thousands of choices.
    </p>
    <button id="pressme">Press Me</button>
    <pre id="results"></pre>
    <script>
        var results = document.getElementById("results");
        var elem = document.getElementById("textblock");
        document.getElementById("pressme").onclick = function () {
            // 第一个子对象是文本对象
            // 没有什么办法能定位Text元素，只能先找到他们的父元素对象，这里父元素为p元素
            var textElem = elem.firstChild;
            results.innerHTML = "The element has " + textElem.length + " chars\n";
            // 不起作用
            textElem.replaceWholeText("This is a new string ");
        };
    </script>
</body>

</html>